<template>
    <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
    <Demo v-if="isShowDemo"></Demo>
</template>

<script>
  import Demo from './compoents/Demo.vue'
  import {ref} from 'vue'
  export default {
    name: 'App',
    components:{
      Demo,
    },
    setup(){
      let isShowDemo = ref(true)
      return {
        isShowDemo,
      }
    },
    //通过配置项的形式使用声明周期钩子
    /* beforeCreate(){
      console.log('---beforeCreate---')
    },
    created(){
      console.log('---created---')
    },
    beforeMount(){
      console.log('---beforeMount---')
    },
    mounted() {
      console.log('---mounted---')
    },
    beforeUpdate(){
      console.log('---beforeUpdate---')
    },
    updated() {
      console.log('---updated---')
    },
    beforeUnmount() {
      console.log('---beforeUnmount---')
    },
    unmounted() {
      console.log('---unmounted---')
    }, */
  }
</script>

